<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>雷达</title>
    <META HTTP-EQUIV="Pragma" CONTENT="no-cache">
    <meta name="viewport"
          content="initial-scale=1.0,maximum-scale=1.0,minimum-scale=1.0,user-scalable=no,width=device-width"/>
    <meta name="format-detection" content="telephone=no"/>
    <meta name="app-mobile-web-app-capable" content="yes"/>
    <meta name="app-mobile-web-app-status-bar-style" content="black-translucent"/>
    <link rel="stylesheet" href="//at.alicdn.com/t/font_772560_th7q34itwge.css">
    <link rel="stylesheet" href="css/index.css">
</head>
<body>
<div class="navbar" id="tab">
    <a href="javascript:void(0);" class="active nav_item tc">
        <span>时间</span>
    </a>
    <a id="behave" href="javascript:void(0);" class="nav_item tc">
        <span>行为</span>
    </a>
    <a id="people" href="javascript:void(0);" class="nav_item tc">
    <span>人</span>
    </a>
</div>
<div class="container" id="tab_con">
    <div id="cus_main" class="tab_item time_wrap" style="overflow: scroll;height: 700px">
        <ul id="cus_action">

        </ul>
    </div>
    <div class="tab_item action_wrap">
        <!-- <div class="action_top flex">
            <p class="title flex1">7天内被查看的行为统计</p>
            <div class="calendar">
                <i class="ra ra-rili"></i>
            </div>
        </div> -->
        <div class="card_wrap">
            <div class="flex">
                <a href="" class="card_item">
                    <div class="action_see" style="background-image:url(https://pimg.ec51.com/h5/h5-card.png)">
                        <p class="see">点赞</p>
                        <p class="account"><span id="praise_times">null</span> 次</p>
                    </div>
                </a>
                <a href="" class="card_item">
                    <div class="action_see"
                         style="background-image:url(https://pimg.ec51.com/h5/h5-zf.png);background-size: 20%;">
                        <p class="see">转发名片</p>
                        <p class="account"><span id="send_card_times">null</span> 次</p>
                    </div>
                </a>
            </div>
            <!--<div class="flex card2">-->
            <!--<a href="" class="card_item">-->
            <!--<div class="action_see" style="background-image:url(https://pimg.ec51.com/h5/h5-zf.png);background-size: 20%;">-->
            <!--<p class="see">转发名片</p>-->
            <!--<p class="account"><span id="send_card_times">0</span> 次</p>-->
            <!--</div>-->
            <!--</a>-->
            <!--</div>-->
        </div>
        
        <div class="list_wrap">
            <a href="" class="list_item flex">
                <i class="ra ra-wx" style="color:#80D540"></i>
                <p class="list_name">打开名片人数</p>
                <p class="number"><span id="open_times">null</span>人</p>
            </a>
            <a href="" class="list_item flex">
                <i class="ra ra-phone" style="color:#ADD480"></i>
                <p class="list_name">查看名片</p>
                <p class="number"><span id="card_times">null</span>次</p>
            </a>
            <a href="" class="list_item flex">
                <i class="ra ra-mall" style="color:#FA988C"></i>
                <p class="list_name">查看商城</p>
                <p class="number"><span id="shop_times">null</span>次</p>
            </a>
            <a href="" class="list_item flex">
                <i class="ra ra-website" style="color:#7DC5EB"></i>
                <p class="list_name">查看官网</p>
                <p class="number"><span id="web_times">null</span>次</p>
            </a>
        </div>
    </div>
    <div class="tab_item person">
        <div class="action_top flex">
            <p class="title flex1">7天内被查看的行为统计</p>
            <div class="calendar">
                <i class="ra ra-rili"></i>
            </div>
        </div>
        <ul id="people_list" class="p_list bg-white">
            <!-- <li class="p_item">
                <a href="" class="flex align">
                    <div class="avatar">
                        <img src="https://pimg.ec51.com/0/15257495700536" alt="">
                    </div>
                    <p class="t_info flex1">leslie666跟你在名片上互动了<span>11</span>次</p>
                    <div class="arrow-right"></div>
                </a>
            </li>
            <li class="p_item">
                <div class="flex align">
                    <div class="avatar">
                        <img src="https://pimg.ec51.com/0/15257495700536" alt="">
                    </div>
                    <p class="t_info flex1">leslie666跟你在名片上互动了<span>11</span>次</p>
                    <div class="arrow-right"></div>
                </div>
            </li> -->
        </ul>
    </div>
</div>

<script src="https://cdn.bootcss.com/jquery/3.3.1/jquery.min.js"></script>
<script>
    $(function () {
        $("#tab_con").find(".tab_item:first").show();    //为每个BOX的第一个元素显示
        $("#tab a").on("click", function () { //给a标签添加事件
            var index = $(this).index();  //获取当前a标签的个数
            $('.container>.tab_item').eq(index).show().siblings().hide()
            $(this).addClass("active").siblings().removeClass("active"); //a标签显示，同辈元素隐藏
        })
    })
</script>
<script src="js/footer.js"></script>
<script src="js/common.js"></script>
<script src="js/global/global.js" type="text/javascript"></script>
<script src="js/lib/md5/spark-md5.js" type="text/javascript"></script>
<script src="sdk/webim.js" type="text/javascript"></script>
<script src="sdk/json2.js" type="text/javascript"></script>
<script src="js/login/login.js" type="text/javascript"></script>
<script src="js/logout/logout.js" type="text/javascript"></script>
<script src="js/common/show_one_msg.js" type="text/javascript"></script>
<script src="js/base.js" type="text/javascript"></script>
<script src="js/profile/profile_manager.js" type="text/javascript"></script>
<script src="js/friend/friend_black_list_manager.js" type="text/javascript"></script>
<script src="js/recentcontact/recent_contact_list_manager.js" type="text/javascript"></script>
<script src="js/switch_chat_obj.js" type="text/javascript"></script>
<script src="js/msg/get_history_msg.js" type="text/javascript"></script>
<script src="js/msg/send_common_msg.js" type="text/javascript"></script>
<script src="js/msg/upload_and_send_pic_msg.js" type="text/javascript"></script>
<script src="js/msg/switch_play_sound_msg.js" type="text/javascript"></script>
<script src="js/msg/send_custom_msg.js" type="text/javascript"></script>
<script src="js/msg/receive_new_msg.js" type="text/javascript"></script>
<script src="js/msg/receive_profile_system_msg.js" type="text/javascript"></script>
<script type="text/javascript">

    $(document).ready(function () {
        $("#behave").click(function () {
            var data = {
                'self_im_id': sessionStorage.getItem('login_identifier')
            };
            $.ajax({
                url: "https://qyim.ec51.com/v1/check/get-total-behave",
                type: "POST",
                data: data,
                success: function (result) {
                    //console.error(result)

                    $("#card_times").html(result.data.card);
                    $("#shop_times").html(result.data.shop);
                    $("#web_times").html(result.data.web);
                    $("#send_card_times").html(result.data.relay)
                    $("#praise_times").html(result.data.praise)
                    $("#open_times").html(result.data.open_count)

                }
            });

        });
        $("#people").click(function () {
            $("#people_list").empty();
            var data = {
                'self_im_id': sessionStorage.getItem('login_identifier')
            };
            $.ajax({
                url: "https://qyim.ec51.com/v1/check/get-total-by-people",
                type: "POST",
                data: data,
                success: function (result) {
                    //console.error(result)
                    if(result.data == 0)return
                    var type = '';
                    for(var i in result.data)
                    {
                        if(result.data[i].count != 0)
                        type = result.data[i].info.action_type ==2 ? '名片' : (result.data[i].info.action_type ==3) ? '商城' : '公司信息';
                        createPeople(result.data[i].info.cus_face,result.data[i].info.cus_im_id,result.data[i].info.cus_name,result.data[i].count,type)
             
                    }

                }
            });

        });
        //初始化下拉加载
        LoadingDataFn();

    });

    /**
     * 上拉加载更多
     */
    var page = 0, //分页码
        // total = 1,//分页总数
        loading = false, //分页开关
        load_flag = true; //分页标识
        var timestamp_today = new Date(new Date().setHours(0,0,0,0)) / 1000 //今天00:00:00的时间戳

    var LoadingDataFn = function () {
        var data = {
            'self_im_id': sessionStorage.getItem('login_identifier'),
            'page': page
        };
        $.ajax({
            url: "https://qyim.ec51.com/v1/check/get-all-customers", type: "POST", data: data, success: function (res) {
                var html = '';
                var list = res.data.customer;
  
                var time_show = '';
                
 
                
                for (var i = 0; i < list.length; i++) {
                    timestamp_action = list[i].time
                    var diff = timestamp_action-timestamp_today
                    // console.error(diff)
                    if( diff<= 86400 && diff >= 0)
                    {
                        time_show = formatTimeStamp(list[i].time,'hh:mm');
                    }else if(diff < 0 && diff >= -86400)
                    {
                        time_show = '昨天'+formatTimeStamp(list[i].time,'hh:mm'); 
                    }else{
                        time_show =formatTimeStamp(list[i].time);
                    }
                    var info = list[i].action_type == 2 ?  '查看了你的<span style="color:red"> 名片</span>，建议跟进哦~' : (list[i].action_type == 3 ? '查看了你的<span style="color:red"> 商城</span>，快去和TA联系吧~' : '查看了你的<span style="color:red"> 公司信息 </span>~');
                    // console.error(info);
                    if(i == 0)
                    {
                        html += '<li class="time_item"> <div class="date tc"> <span>' + time_show + '</span> </div> <div class="t_content"> <a href="./time-detail.html?name=' + list[i].cus_name + '&amp;cus_im_id=' + list[i].cus_im_id + '&amp;face_url=' + list[i].cus_face + '"> <div class="avatar"> <img src="' + list[i].cus_face + '" alt=""></div> <p class="t_info">' + '<span style="color:#FF7F00">'+list[i].cus_name+'</span>'+'  ' + info  +'</p> <div class="arrow-right"></div> </a> </div> ';
                    }else if(i>0 && list[i-1].time-list[i].time < 60)
                    {
                        // console.error(list[i].time+','+list[i-1].time)
                        html+='<div class="t_content"> <a href="./time-detail.html?name=' + list[i].cus_name + '&amp;cus_im_id=' + list[i].cus_im_id + '&amp;face_url=' + list[i].cus_face + '"> <div class="avatar"> <img src="' + list[i].cus_face + '" alt=""></div> <p class="t_info">' + '<span style="color:#FF7F00">'+list[i].cus_name+'</span>'+'  ' + info  +'</p> <div class="arrow-right"></div> </a> </div>';

                    }else{
                        html += '</li> <li class="time_item"> <div class="date tc"> <span>' + time_show + '</span> </div> <div class="t_content"> <a href="./time-detail.html?name=' + list[i].cus_name + '&amp;cus_im_id=' + list[i].cus_im_id + '&amp;face_url=' + list[i].cus_face + '"> <div class="avatar"> <img src="' + list[i].cus_face + '" alt=""></div> <p class="t_info">' + '<span style="color:#FF7F00">'+list[i].cus_name+'</span>'+'  ' + info  +'</p> <div class="arrow-right"></div> </a> </div> ';

                    }
                    // html += '</li> <li class="time_item"> <div class="date tc"> <span>' + formatTimeStamp(list[i].time) + '</span> </div> <div class="t_content"> <a href="./time-detail.html?name=' + list[i].cus_name + '&amp;cus_im_id=' + list[i].cus_im_id + '&amp;face_url=' + list[i].cus_face + '"> <div class="avatar"> <img src="' + list[i].cus_face + '" alt=""></div> <p class="t_info">' + '<span style="color:#FF7F00">'+list[i].cus_name+'</span>'+'  ' + info  +'</p> <div class="arrow-right"></div> </a> </div> </li>';
                }
                $('#cus_action').append(html);
                // total = res.data.PageCount;
                loading = false;
              
                if(res.data.flag)
                {
            
                    page++;
                 
                }else{
        
                    load_flag = false; 

                }
                $('.loading').remove();

            }
        });

    };

    $('#cus_main').scroll(function () {
        // console.error(load_flag)
        if (($(this)[0].scrollTop + $(this).height() + 60) >= $(this)[0].scrollHeight) {
            if (loading || !load_flag) {
                return
            }
            loading = true;
            $('#cus_main').append('<div class="loading"></div>');
                console.log("第" + page + "页");
                LoadingDataFn();
          
           
        }
    });

    //监听新消息事件
    var msgList = [];
    var dateStart = null;
    var dateEnd = null;

    //newMsgList 为新消息数组，结构为[Msg]
    function onMsgNotify(newMsgList) {
        //console.warn(newMsgList);
        var sess, newMsg;
        //获取所有聊天会话
        var sessMap = webim.MsgStore.sessMap();


        for (var j in newMsgList) {//遍历新消息
            newMsg = newMsgList[j];
            //console.error(newMsg);

            var ID = newMsg.getSession().id();//用户标识
            var name = newMsg.getSession().name();//用户名
            var msgcontent = newMsg.elems[0].content.text;//内容

            if (name.length > 10) { //名称过长，截取一部分
                name = name.substr(0, maxNameLen) + "...";
            }
            //alert('id:'+ID+'name:'+name+'说'+msgcontent);

        }
    }


    //监听事件
    var listeners = {

        "onMsgNotify": onMsgNotify //监听新消息(私聊，普通群(非直播聊天室)消息，全员推送消息)事件，必填
        ,

        "onLongPullingNotify": function (data) {
            console.debug('onLongPullingNotify', data)
        }
    };
    var selType = webim.SESSION_TYPE.C2C; //当前聊天类型
    var selToID = null; //当前选中聊天id（当聊天类型为私聊时，该值为好友帐号，否则为群号）
    var selSess = null; //当前聊天会话对象
    var recentSessMap = {}; //保存最近会话列表
    var reqRecentSessCount = 50; //每次请求的最近会话条数，业务可以自定义
    //存放c2c或者群信息（c2c用户：c2c用户id，昵称，头像；群：群id，群名称，群头像）
    var infoMap = {}; //初始化时，可以先拉取我的好友和我的群组信息

    let options_login = {
        'isAccessFormalEnv': true,//是否访问正式环境，默认访问正式，选填
        'isLogOn': false//是否开启控制台打印日志,默认开启，选填
    };

    //sdk登录
    function webimLogin(loginInfo, cb) {
        webim.login(
            loginInfo, listeners, options = options_login,
            function (resp) {
                // alert(resp);
                LoadingDataFn();

            },
            function (err) {
                alert('登录失败');

            }
        );
    }
    function createPeople(face,id,name,times,type)
    {        
        var html = '<li class="p_item"> <a href="./time-detail.html?name='+name+'&cus_im_id='+id+'&face_url='+face+'" class="flex align"> <div class="avatar"> <img src="'+face+'" alt=""> </div> <p class="t_info flex1">'+'<span style="color:#FF7F00">'+name+'</span>'+' 查看了你的 '+'<span style="color:red">'+type+'</span>'+' 共 <span> '+times+'</span> 次</p> <div class="arrow-right"></div> </a> </li>'
        $("#people_list").prepend(html);
    }

    //更换消息监听，用于页面切换

    function changelistener() {
        var listeners = {
            "onMsgNotify": onMsgNotify //监听新消息
            ,
            "onLongPullingNotify": function (data) {
                //console.debug('onLongPullingNotify', data)
            }
        };
        webim.changelistener(listeners, function (x) {
        }, function (x) {
            alert('failed')
        });
    }

    function GetQueryString(name) {
        var reg = new RegExp("(^|&)" + name + "=([^&]*)(&|$)");
        var r = window.location.search.substr(1).match(reg);
        if (r != null) return unescape(r[2]);
        return null;
    }

    function getselfface() {
        var data = {
            'self_im_id': sessionStorage.getItem('login_identifier')
        }
        $.ajax({
            url: "https://qyim.ec51.com/v1/check/get-self-face", type: "POST", data: data, success: function (result) {
                //console.error(result)
                //console.error(result.data.storeid)
                sessionStorage.setItem('self_store_id', result.data.storeid);
                localStorage.setItem('self_name_', result.data.name)
                if (result.data.face)
                    localStorage.setItem('self_face_url', result.data.face)


                else{
                    localStorage.setItem('self_face_url','https://img2.woyaogexing.com/2018/02/27/2075c8217f25258e!200x200.jpg')
                }
            }
        });

    }


    function formatTimeStamp(timestamp, format) {
        if (!timestamp) {
            return 0;
        }
        var formatTime;
        format = format || 'yyyy-MM-dd hh:mm';
        var date = new Date(timestamp * 1000);
        var o = {
            "M+": date.getMonth() + 1, //月份
            "d+": date.getDate(), //日
            "h+": date.getHours(), //小时
            "m+": date.getMinutes(), //分
            "s+": date.getSeconds() //秒
        };
        if (/(y+)/.test(format)) {
            formatTime = format.replace(RegExp.$1, (date.getFullYear() + "").substr(4 - RegExp.$1.length));
        } else {
            formatTime = format;
        }
        for (var k in o) {
            if (new RegExp("(" + k + ")").test(formatTime))
                formatTime = formatTime.replace(RegExp.$1, (RegExp.$1.length == 1) ? (o[k]) : (("00" + o[k]).substr(("" + o[k]).length)));
        }
        return formatTime;
    }


    window.onload = function () {
        
        if (!sessionStorage.getItem('login_identifier')) //已登录，页面切换无需重复登陆
        {
            //独立模式
            //当前用户身份
            var im_id = GetQueryString('im_id');
            sessionStorage.setItem('access', GetQueryString('access'));
            var usersig = GetQueryString('usersig');
            var loginInfo = {
                'sdkAppID': 1400114382, //用户所属应用id,必填
                'identifier': im_id, //当前用户ID,必须是否字符串类型，必填
                'accountType': 31956, //用户所属应用帐号类型，必填
                'userSig': usersig,
                //当前用户身份凭证，必须是字符串类型，必填
                'identifierNick': null, //当前用户昵称，不用填写，登录接口会返回用户的昵称，如果没有设置，则返回用户的id
                'headurl': 'img/me.jpg' //当前用户默认头像，选填，如果设置过头像，则可以通过拉取个人资料接口来得到头像信息
            };
            webimLogin(loginInfo);//登录
            getselfface();

        } else {
            changelistener();
        }
        if (window.console) {
        console.groupCollapsed('哈哈哈哈哈哈哈哈哈哈哈', 'color:#009a61; font-size: 28px; font-weight: 300');
        console.log('EC51', 'color:#009a61');
        console.groupEnd();
    }
    };
</script>


</body>
</html>